<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

	<head>
		<meta charset="UTF-8">
		<title>运维人员</title>
		<link  rel="stylesheet" type="text/css" href="<%= basePath%>resources/css/pcrepairman.css" />
		<link rel="stylesheet" type="text/css" href="<%= request.getContextPath()%>resources/css/jNotify.jquery.css"/>
		<script src="<%= request.getContextPath()%>resources/js/pcrepairman.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="<%= request.getContextPath()%>resources/mobileOperator/js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="<%= request.getContextPath()%>resources/mobileOperator/js/angular.min.js"></script>
		<script type="text/javascript" src="<%= request.getContextPath()%>resources/js/PCrepairmanController.js"></script>
		<script type="text/javascript" src="<%= request.getContextPath()%>resources/js/echarts.min.js" ></script>

		<script type="text/javascript" src="<%= request.getContextPath()%>resources/js/jNotify.jquery.js"></script>
	</head>

	<body ng-app="myapp">
		<!--头部开始-->
		<div id="head">
			<div id="head_con">
				<p class="title">智能报修系统</p>
				<div id="head_right">
					<a href="#">
						<span>
						<img src="../../resources/img/email.png"/>
					</span> 收件箱
					</a>
					<button id="downloadAPP">APP下载</button>
				</div>
			</div>
		</div>
		<!--头部结束-->
		<!--左边开始-->
		<!--左边-->
		<div id="staffLeft">
			<div id="staffLeftCon">
				<!--运维人员的信息-->

				<div id="staffInfo" ng-controller="InformationCtrl">
					<!--运维人员姓名-->
					<p class="staffName">{{repairmaninfo.userName}}</p>
					<!--运维人员学号-->
					<p class="staffNum" id="receiveOne">{{repairmaninfo.userAccount}}</p>
					<!--运维人员职位-->
					<p class="place">运维人员</p><!--运维人员写死了，需要可以再次修改-->
				</div>


				<div id="operation">
					<ul>
						<li class="active" id="mywork">我的工单</li>
						<li id="wite">待处理</li>
						<li id="my">我的绩效</li>
						<li id="mainmy">我的信息</li>
					</ul>
				</div>
				<div class="phoneNum" ng-controller="PhoneInformationCtrl">
					服务电话：{{phoneNum}}
				</div>
			</div>
		</div>

		<!--左边结束-->
		<!--右边开始-->
		<div id="pushOrdersRight">



			<div id="pushOrdersRightShow">
				<!--我的工单-->

				<!--甩单弹出框-->
				<div id="receive2" ng-controller="suaiDanCtrl" class="hidden">
					<div id = "sdpeople">可甩单的运维人员:</div>
					<select  ng-model="receiveTwo" ng-options="receive.userName for receive in receives">
					</select>

					<h3 class="chooseitem">你选择的是  工号：{{receiveTwo.userAccount}}   姓名： {{receiveTwo.userName}}  熟悉领域{{receiveTwo.type}}</h3>


					<div id="suaidanbuttom"><button ng-click="gosuaidan()">甩单</button>

						<button ng-click="suaidanCancel()">取消</button></div>



				</div>

				<div id="MYTICKET" class="list" hidden="hidden">
					<table ng-controller="ticketCtrl">
						<thead>
							<tr>
								<th>创建时间</th>
								<th>工单号</th>
								<th>故障种类</th>
								<th>工单状态</th>
								<th>甩单情况</th>
								<th>甩单原因</th>
								<th>工单评分</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="ticket in tickets | orderBy:'jobnumber':true">
								<td>{{ticket.uploadTime | newtime}}</td>
								<td>{{ticket.jobnumber}}</td>
								<td>{{ticket.one}}</td>
								<td>{{ticket.isComplete | wordStatus}}</td>
								<td><input type="submit" value="甩单" ng-click="go(ticket)" /></td>
								<td ng-model="reason">{{ticket.reason}}</td>
								<td>{{ticket.commentStar}}</td>
							</tr>

						</tbody>
					</table>

				</div>
				<!--待处理-->

				<div id="NEEDHANDLETABLE" class="list" ng-controller="needHandleCtrl">
					<table>
						<thead>
							<tr>
								<th>创建时间</th>
								<th>工单号</th>
								<th>故障描述</th>
								<th>创建人</th>
								<th>创建人电话</th>
								<th>创建人地址</th>
								<th>甩单情况</th>
								<th>甩单原因</th>


							</tr>
						</thead>
						<tbody>
						<tr ng-repeat="ticket in unHandtickets | orderBy:'jobnumber':true">
						<td>{{ticket.uploadTime | newtime}}</td>
						<td>{{ticket.jobnumber}}</td>
						<td>{{ticket.details}}</td>
						<td>{{ticket.userName}}</td>
						<td>{{ticket.userPhone}}</td>
						<td>{{ticket.userAddress}}</td>
						<td><input type="submit" value="甩单" ng-click="go(ticket)" ng-disabled="shuaidanBtn1"/></td>
						<td ng-model="reason">{{ticket.reason}}</td>

						</tr>

						</tbody>



					</table>

				</div>

				<!--我的绩效-->

				<div id="MYPERFORMATION" class="list">

					<div id="dataChoose">
						<input id="chooseYear" placeholder="请输入年份如2018" maxlength="4" minlength="4"/>年
						<input id="chooseMonth" placeholder="请输入月份如4或12" maxlength="2" minlength="1"/>月

						<button type="button" id="chooseGrade">查询</button>





					</div>

					<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
					<div id="main" style="width: 800px">
						<script type="text/javascript">


							var currentyear = "";

							var currentmonth = "";



							$("#chooseGrade").click(function(){
								var year1= angular.element(document.getElementById("chooseYear")).val();
								var month1=angular.element( document.getElementById("chooseMonth")).val();

								currentmonth = month1;
								currentyear = year1;
								console.log(year1);
								console.log(month1);


								var option = {
									tooltip: {},
									legend: {
										data: [""+currentyear+"/"+currentmonth],
										textStyle: {fontWeight: 'bold', fontSize: 16},
										width: main.style.width
									},
									xAxis: {
										data: [ "未完成工单","总单数",  "甩单数","本月单", "已完成工单数"],
										axisLabel: {
											interval: 0//横轴信息全部显示
										},
										axisLine: {
											lineStyle: {
												color: '#295436'
											}
										}
									},
									yAxis: {
										axisLine: {
											lineStyle: {
												color: '#295436'
											}
										}
									},
									series: [{
										name: ""+currentyear+"/"+currentmonth,
										type: 'bar',
										data: [],
										barWidth: 40,
										itemStyle: {
											normal: {
												//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
												color: function (params) {
													var colorList = ['#FF713C', '#F2FF3C', '#BCFF3A', '#3CFFC4', '#00DB66'];
													return colorList[params.dataIndex];
												},
												label: {//给柱状图上添加数据
													show: true,
													position: 'top',
													textStyle: {
														color: '#615a5a'
													},
													formatter:function(params){
														if(params.value==0){
															return '';
														}else
														{
															return params.value;
														}
													}
												}
											}
										}
									}]
								};

								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);
								//用于使chart自适应高度和宽度
								window.onresize = function () {
									//重置容器高宽
									resizeWorldMapContainer();
									myChart.resize();
								};


								var xdatas = [];

								var one={'receiveOne':1506101090,'year':year1,'month':month1};
								$.ajax({
									type: "POST",//请求方式
									url: "http://localhost:8080/countWorkOrder",//地址，就是json文件的请求路径
									async: true,
									data: JSON.stringify(one),//解决400错误
									dataType: "json",//数据类型可以为 text xml json  script  jsonp
									contentType: 'application/json;charset=UTF-8',//解决415错误
									success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数
										console.log(result.data);
										if (result) {

											//分别取出这几个值
											var key1 = "未完成";
											var value1 = result.data[key1];

											var key2= "总单数";
											var value2 = result.data[key2];

											var key3= "甩单数";
											var value3 = result.data[key3];

											var key4= "本月单";
											var value4 = result.data[key4];

											var key5= "已完成";
											var value5 = result.data[key5];

//                            将取出的值的value组成新的数组
											var values =  [value1,value2,value3,value4,value5];
//                            console.log(values);

											for (var i = 0; i < 5; i++) {
												xdatas.push(values[i]);    //挨个取出类别并填入类别数组
											}
											myChart.setOption({
												yAxis:{},
												series:{
													data:xdatas
												}
											});

										}
									}, error: function () {
										alert("获取运维业绩失败，请重试！");
									}
								});


							});



							// 基于准备好的dom，初始化echarts实例
							var myChart = echarts.init(document.getElementById("main"));
							var main = document.getElementById("main");

							//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
							var resizeWorldMapContainer = function () {
								main.style.width = window.innerWidth*0.6 + 'px';

							};
							//设置容器宽高
							resizeWorldMapContainer();


							//    设置时间  默认显示当前月份
							var currentdate = new Date();
							 currentyear = currentdate.getFullYear();

							 currentmonth = currentdate.getMonth()+1;


							// 指定图表的配置项和数据
							var option = {
								tooltip: {},
								legend: {
									data: [""+currentyear+"/"+currentmonth],
									textStyle: {fontWeight: 'bold', fontSize: 16},
									width: main.style.width
								},
								xAxis: {
									data: [ "未完成工单","总单数",  "甩单数","本月单", "已完成工单数"],
									axisLabel: {
										interval: 0//横轴信息全部显示
									},
									axisLine: {
										lineStyle: {
											color: '#295436'
										}
									}
								},
								yAxis: {
									axisLine: {
										lineStyle: {
											color: '#295436'
										}
									}
								},
								series: [{
									name: ""+currentyear+"/"+currentmonth,
									type: 'bar',
									data: [],
									barWidth: 40,
									itemStyle: {
										normal: {
											//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
											color: function (params) {
												var colorList = ['#FF713C', '#F2FF3C', '#BCFF3A', '#3CFFC4', '#00DB66'];
												return colorList[params.dataIndex];
											},
											label: {//给柱状图上添加数据
												show: true,
												position: 'top',
												textStyle: {
													color: '#615a5a'
												},
												formatter:function(params){
													if(params.value==0){
														return '';
													}else
													{
														return params.value;
													}
												}
											}
										}
									}
								}]
							};

							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);
							//用于使chart自适应高度和宽度
							window.onresize = function () {
								//重置容器高宽
								resizeWorldMapContainer();
								myChart.resize();
							};




							//定义一个数组来放坐标值
							var xdatas = [];

							var one={'receiveOne':1506101090,'year':currentyear,'month':currentmonth};
							$.ajax({
								type: "POST",//请求方式
								url: "http://localhost:8080/countWorkOrder",//地址，就是json文件的请求路径
								async: true,
								data: JSON.stringify(one),//解决400错误
								dataType: "json",//数据类型可以为 text xml json  script  jsonp
								contentType: 'application/json;charset=UTF-8',//解决415错误
								success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数
									console.log(result.data);
									if (result) {

										//分别取出这几个值
										var key1 = "未完成";
										var value1 = result.data[key1];

										var key2= "总单数";
										var value2 = result.data[key2];

										var key3= "甩单数";
										var value3 = result.data[key3];

										var key4= "本月单";
										var value4 = result.data[key4];

										var key5= "已完成";
										var value5 = result.data[key5];

//                            将取出的值的value组成新的数组
										var values =  [value1,value2,value3,value4,value5];
//                            console.log(values);

										for (var i = 0; i < 5; i++) {
											xdatas.push(values[i]);    //挨个取出类别并填入类别数组
										}
										myChart.setOption({
											yAxis:{},
											series:{
												data:xdatas
											}
										});

									}
								}, error: function () {
									alert("获取运维业绩失败，请重试！");
								}
							});


						</script>

					</div>

				</div>

				<!--我的信 息-->

				<div id=" MYINFORMATION" class="list" ng-controller="peopleInformationCtrll">
					<form id="myInformation">
						<div class="hang"><span class="information">学工号:</span><input type="text"  ng-value="$root.repairmaninfo.userAccount" readonly="true"/></div><br/>
						<div class="hang"><span class="information">姓名:</span><input type="text" ng-value="$root.repairmaninfo.userName" readonly="true"/></div><br/>
						<div class="hang"><span class="information">地址:</span><input  id="PeopelAdress" placeholder="请输入你的地址"  ng-model="peopleAddress"/></div><br/>
						<div class="hang"><span class="information">电话:</span><input  id="PeopelPhone" placeholder="请输入你的电话号码"  ng-model="peoplePhone"/></div><br/>
						<button id="saveInformation" ng-disabled="saveBtn" type="button" ng-click="changephone()">保存</button>

					</form>


				</div>

			</div>

		</div>
		<!--右边结束-->




		<div id="footer" class="footer">
			<p class="footerWord">版权所有&nbsp;四川旅游学院</p>
		</div>


	</body>

</html>